<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%@ include file="/view/common/init.jsp"%>
<center>
<div class="header">THÊM GROUP</div>
<script type="text/javascript">
var totalRole = 1000;
var countRole = 0;
var roles = new Array();
var curValue = null;
function addRole(){
	if (checkAddRole()!=true){
		alert('Bạn không thể add thêm role!');
		return false;
	}
	countRole = countRole + 1;
	var newdiv = document.createElement('div');
	newdiv.setAttribute('style', 'width: 400px;margin: 5px;');
	newdiv.setAttribute('id', 'divRole' + countRole);
	newdiv.innerHTML = 	
		'<select id="role' + countRole + '" name="role' + countRole + '" style="width: 300px;" onfocus="loadRoles(\'role' + countRole + '\');">' + 
			'<option value="0">Hãy chọn role</option>' + 
		'</select>' + 
		'<input type="button" value="Xóa" onclick="removeRole(\'divRole' + countRole + '\');"/>';
	$('roleDiv').appendChild(newdiv);
	
}
function removeRole(id){
	$('roleDiv').removeChild($(id));
}

function loadRoles(id){
	roles = new Array();
	curValue = $(id).value;
	$(id).disabled="disabled";
	for(var i=1; i<=countRole; i++){
		if ($('role' + i)!= null){
			if ($('role' + i).value!=0 && $('role' + i).value!=$(id).value){
				roles.push($('role' + i).value);
			}
		}
	}
	new Ajax.Request(base_url + 'role/listJson.do?rolesInGroup=' + roles.toString(), {
		method : 'post',
		onSuccess : function(transport) {
			var data = transport.responseText.evalJSON();
			// Init Countries combo
			pushValueToRoleCombo(data.roles, id);
		},
		onFailure : function() {
			alert('Something went wrong...');
		}
	});
}

function pushValueToRoleCombo(data, id){
	$(id).options.length = 1;
	for(var i=data.length-1; i>=0; i--){
	    var option = document.createElement('option');
	    option.text = data[i].roleName;
	    option.value = data[i].roleId;
	    if (option.value==curValue) {
	    	option.selected = true;
	    }	    
	    var optionOld = $(id).options[$(id).selectedIndex + 1];  
	    try {
	    	$(id).add(option, optionOld); // standards compliant; doesn't work in IE
	    }
	    catch(ex) {
	    	$(id).add(option, $(id).selectedIndex + 1); // IE only
	    }
	}
	$(id).disabled=null;
}

/**
 *	For scope cobobox 
 */
 var totalScope = 1000;
var countScope = 0;
var cores = new Array();
function addScope(){
	if (checkAddScope()!=true){
		alert('Bạn không thể add thêm scope!');
		return false;
	}
	countScope = countScope + 1;
	var newdiv = document.createElement('div');
	newdiv.setAttribute('style', 'width: 500px;margin: 5px;');
	newdiv.setAttribute('id', 'divScope' + countScope);
	newdiv.innerHTML = 	
		'<div style="width: 200px;float: left;"><select id="scope' + countScope + '" name="scope' + countScope + '" style="width: 180px;" onchange="$(\'scopeItem' + countScope + '\').options.length = 1;" onfocus="loadScopes(\'scope' + countScope + '\');">' + 
			'<option value="0">Hãy chọn scope</option>' + 
		'</select></div>' +
		'<div style="width: 200px;float: left;"><select id="scopeItem' + countScope + '" name="scope' + countScope + '" style="width: 190px;" onfocus="loadScopeItems(\'scope'+ countScope +'\', \'scopeItem' + countScope + '\');">' + 
		'<option value="0">Hãy chọn giá trị scope</option>' + 
		'</select></div>' + 		 
		'<div style="width: 70px; float: left;"><button type="button" onclick="removeScope(\'divScope' + countScope + '\');">Xóa</button></div>' +
		'<div style="clear: left;"><span></span></div>';
	$('scopeDiv').appendChild(newdiv);
	
}
function removeScope(id){
	$('scopeDiv').removeChild($(id));
}

function loadScopes(id){
	scopes = new Array();
	curValue = $(id).value;
	$(id).disabled="disabled";
	for(var i=1; i<=countScope; i++){
		if ($('scope' + i)!= null){
			if ($('scope' + i).value!=0 && $('scope' + i).value!=$(id).value){
				scopes.push($('scope' + i).value);
			}
		}
	}
	new Ajax.Request(base_url + 'scope/listJson.do?scopesInGroup=' + scopes.toString(), {
		method : 'post',
		onSuccess : function(transport) {
			var data = transport.responseText.evalJSON();
			// Init Countries combo
			pushValueToScopeCombo(data.scopes, id);
			totalScope = data.scopes.length;
		},
		onFailure : function() {
			alert('Something went wrong...');
		}
	});
}
function pushValueToScopeCombo(data, id){
	$(id).options.length = 1;
	for(var i=data.length-1; i>=0; i--){
	    var option = document.createElement('option');
	    option.text = data[i].scopeName;
	    option.value = data[i].scopeId;
	    if (option.value==curValue) {
	    	option.selected = true;
	    }	    
	    var optionOld = $(id).options[$(id).selectedIndex + 1];  
	    try {
	    	$(id).add(option, optionOld); // standards compliant; doesn't work in IE
	    }
	    catch(ex) {
	    	$(id).add(option, $(id).selectedIndex + 1); // IE only
	    }
	}
	$(id).disabled=null;
}

/**
 *	For scope item combobox 
 */
function loadScopeItems(id, scopeItemId){
	$(scopeItemId).disabled="disabled";
	if ($(id).value == '0'){
		alert('Bạn chưa chọn scope');
		$(scopeItemId).disabled=null;
		return false;	
	}
	new Ajax.Request(base_url + 'scope/listItemJson.do?scope.scopeId=' + $(id).value, {
		method : 'post',
		onSuccess : function(transport) {
			var data = transport.responseText.evalJSON();
			// Init Countries combo
			pushValueToScopeItemCombo(data.scopeItems, scopeItemId);
		},
		onFailure : function() {
			alert('Something went wrong...');
		}
	});	
}


function pushValueToScopeItemCombo(data, id){
	$(id).options.length = 1;
	for(var i=data.length-1; i>=0; i--){
	    var option = document.createElement('option');
	    option.text = data[i].name;
	    option.value = data[i].id;
	    if (option.value==curValue) {
	    	option.selected = true;
	    }	    
	    var optionOld = $(id).options[$(id).selectedIndex + 1];  
	    try {
	    	$(id).add(option, optionOld); // standards compliant; doesn't work in IE
	    }
	    catch(ex) {
	    	$(id).add(option, $(id).selectedIndex + 1); // IE only
	    }
	}
	$(id).disabled=null;
}

/**
 * Submit form
 */
function submitGroupAddForm(){
	if (!check('group.groupName', 'Tên group', null, 40)){
		return false;
	}
	scopes = new Array();
	roles = new Array();
	scopeItems = new Array();	
	for(var i=1; i<=countRole; i++){
		if ($('role' + i)!= null){
			if ($('role' + i).value!=0){
				roles.push($('role' + i).value);
			} else {
				alert('Tất cả các combobox phải được chọn');
				return false;
			}	
		}
	}	
	for(var i=1; i<=countScope; i++){
		if ($('scope' + i)!= null){
			if ($('scope' + i).value!=0){
				scopes.push($('scope' + i).value);
			} else {
				alert('Tất cả các combobox phải được chọn');
				return false;				
			}
		}
	}
	for(var i=1; i<=countScope; i++){
		if ($('scopeItem' + i)!= null){
			if ($('scopeItem' + i).value!=0){
				scopeItems.push($('scopeItem' + i).value);
			} else {
				alert('Tất cả các combobox phải được chọn');
				return false;				
			}
		}
	}	
	$('scopes').value = scopes.toString();
	$('roles').value = roles.toString();
	$('scopeItems').value = scopeItems.toString();	

	new Ajax.Request(base_url + 'group/nameIsUsed.do?group.groupName=' + $('group.groupName').value, {
		method : 'post',
		onSuccess : function(transport) {
			var data = transport.responseText.evalJSON();
			// Init Countries combo
			if (data.nameIsUsed=='false'){
				$('groupAddForm').submit();
			} else {
				alert('Tên group đã tồn tại! Hãy chọn lại');
				setTimeout(function(){$('group.groupName').focus();}, 10);		
			}
		},
		onFailure : function() {
			alert('Something went wrong...');
		}
	});	
}

// Check num of roles and scopes
var numOfRole = ${numOfRole};
var numOfScope = ${numOfScope};
function checkAddRole(){
	var curNumOfRole = 0;
	for(var i=1; i<=countRole; i++){
		if ($('role' + i)!= null){
			curNumOfRole = curNumOfRole + 1;
		}
	}	
	if (curNumOfRole==numOfRole){
		return false;
	}
	return true;
}
function checkAddScope(){
	var curNumOfScope = 0;
	for(var i=1; i<=countScope; i++){
		if ($('scope' + i)!= null){
			curNumOfScope = curNumOfScope + 1;
		}
	}
	if (curNumOfScope==numOfScope){
		return false;
	}
	return true;
}
</script>
<title>Thêm thuê group</title>
<div style="width: 980px;">
<s:form id="groupAddForm" action="addComplete.do">
<input type="hidden" name="roles" id="roles">
<input type="hidden" name="scopes" id="scopes">
<input type="hidden" name="scopeItems" id="scopeItems">
<table class="tbl_info" border="0">
	<tbody>
		<tr>
			<td class="hed" colspan="2" style="width: 713px"/>THÊM GROUP</td>
		</tr>
		<tr><td style="width: 100px;">Tên group<span class="error">&nbsp;*</span></td><td style="text-align: left;"><div style="margin: 5px;">
			<s:textfield name="group.groupName"
				cssClass="require" id="group.groupName"/>	
		</div></td></tr>
		<tr><td><div style="width: 100px; ">Danh sách Role</div></td>
			<td style="text-align: left;">
				<div id="roleDiv" style="width: 500px;">
				</div>
				<div style="margin: 5px;"><button type="button" onclick="addRole();">Thêm role</button></div>
			</td>
		</tr>
		<tr><td><div style="width: 100px; ">Danh sách Scope</div></td>
			<td style="text-align: left;">
				<div id="scopeDiv" style="width: 500px;">
				</div>
				<div style="margin: 5px;"><button type="button" onclick="addScope();">Thêm scope</button></div>
			</td>
		</tr>
</tbody>
</table>
<div style="margin-top: 30px;">
	<button type="button" onclick="history.back();">Hủy bỏ</button>
	<button class="bntChoose" type="button" onclick="submitGroupAddForm();">Đồng ý</button>
</div>
</s:form>
</div>
</center>
